<template>
  <div>
    <div class="comment-title"><i class="iconfont iconpinglunzu" />评论</div>
    <!-- 评论框 -->
    <div class="comment-input-wrapper">
      <div style="display: flex">
        <el-avatar
          v-if="userInfo === null"
          icon="el-icon-user-solid"
          size="large"
          @click="handleLogin"
        ></el-avatar>
        <div
          v-else
          class="comments-form-user-avatar no-img-placeholder-colorful no-img-placeholder-horizon"
        >
          <img :src="userInfo.avatar" alt="用户头像" />
        </div>

        <div style="width: 100%" class="ml-3">
          <div class="comment-input">
            <textarea
              class="comment-textarea"
              v-model="commentContent"
              placeholder="对于这篇文章你有什么想说的?"
              auto-grow
              dense
            />
          </div>
          <!-- 操作按钮 -->
          <div class="emoji-container">
            <span
              @click="handleClick"
              style="color: #ed9d2e"
              @blur="handleBlur"
            >
              <i class="iconfont iconbiaoqing" />
            </span>
            <button
              @click="insertComment"
              class="comment-btn"
              style="margin-left: auto"
            >
              发布
            </button>
          </div>
          <!-- 表情框 -->
          <Emotion
            v-show="showDialog"
            class="emoji-picker"
            @emotion="handleEmotion"
          />
        </div>
      </div>
    </div>
    <!-- 评论详情 -->
    <div v-if="count > 0 && reFresh">
      <div class="count">{{ count }}条评论</div>

      <div
        style="display: flex"
        class="pt-5"
        v-for="(item, index) of commentList"
        :key="item.id"
      >
        <el-avatar :size="40" class="comment-avatar">
          <img :src="item.avatar" />
        </el-avatar>
        <div class="comment-meta">
          <!-- <div class="comment-user">
            <span>{{ item.nickname }}</span>
          </div> -->

          <div class="comment-info">
            <div class="comment-info-title">
              <span class="comment-user" style="margin-right: 10px">{{
                item.nickname
              }}</span>
              <span style="margin-right: 10px">{{
                item.create_time | dataFormat
              }}</span>
              <span class="reply-btn" @click="replyComment(index, item)">
                回复
              </span>
            </div>
            <div class="commmet-info-text">
              <p
                v-html="replaceEmotionText(item.content)"
                class="comment-content"
              ></p>
            </div>
          </div>

          <div
            style="display: flex"
            v-for="reply of item.replyList"
            :key="reply.id"
            class="reply-box"
          >
            <el-avatar :size="36" class="comment-avatar">
              <img :src="reply.avatar" />
            </el-avatar>
            <div class="reply-meta">
              <div class="comment-info">
                <div class="comment-info-title">
                  <span class="comment-user">{{ reply.nickname }}</span>
                  <span style="margin-right: 10px">
                    {{ reply.create_time | dataFormat }}
                  </span>
                  <span
                    class="reply-btn"
                    @click="replyComment(index, reply)"
                    style="margin-right: -5px"
                  >
                    回复
                  </span>
                </div>
              </div>

              <p class="comment-content">
                <template v-if="reply.replyUserId !== item.userId">
                  <span
                    v-if="!reply.replyWebSite"
                    class="comment-nickname ml-1"
                  >
                    @{{ reply.nickname }}
                  </span>
                  <a
                    v-else
                    :href="reply.replyWebSite"
                    target="_blank"
                    class="comment-nickname ml-1"
                  >
                    @{{ reply.nickname }}
                  </a>
                </template>
                <span v-html="replaceEmotionText(reply.content)" />
              </p>
            </div>
          </div>

          <Reply ref="reply" :parentConId="item.id" />
        </div>
      </div>
      <!-- 
      <div class="load-wrapper">
        <v-btn outlined v-if="count > commentList.length" @click="listComments">
          加载更多...
        </v-btn>
      </div> -->
    </div>
    <!-- 没有评论提示 -->
    <div v-else style="padding: 1.25rem; text-align: center">来发评论吧~</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Emotion from "@/components/common/Emotion/Emotion.vue";
import Reply from "./Reply";
import { addFirstComment } from "@/request/api";
import { replaceEmotionText } from "@/components/common/Emotion/emotion";
export default {
  components: {
    Emotion,
    Reply,
  },
  props: {
    commentList: {
      type: Array,
    },
    count: {
      type: Number,
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  data: function () {
    return {
      showDialog: false,
      reFresh: true,

      commentContent: "",
      chooseEmoji: false,
      current: 1,
    };
  },
  methods: {
    replaceEmotionText,
    handleLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    handleEmotion(emoji) {
      this.commentContent += `[${emoji.text}]`;
    },
    handleClick() {
      this.showDialog = !this.showDialog;
    },
    handleBlur() {
      this.showDialog = false;
    },
    replyComment(index, item) {
      this.$refs.reply.forEach((item) => {
        item.$el.style.display = "none";
      });
      //传值给回复框
      this.$refs.reply[index].commentContent = "";
      this.$refs.reply[index].nickname = item.nickname;
      this.$refs.reply[index].replyUserId = item.userId;
      this.$refs.reply[index].parentId = this.commentList[index].id;
      this.$refs.reply[index].chooseEmoji = false;
      this.$refs.reply[index].index = index;
      this.$refs.reply[index].$el.style.display = "block";
    },
    addEmoji(key) {
      this.commentContent += key;
    },

    async insertComment() {
      //判断登录
      let userInfo = this.$store.state.userInfo;
      if (!userInfo) {
        this.$store.state.loginFlag = true;
        return false;
      }
      //判空
      if (this.commentContent.trim() === "") {
        this.$message({
          message: "评论不能为空",
          type: "error",
          offset: 80,
        });
        return false;
      }
      const { data: res } = await addFirstComment({
        content: this.commentContent,
        blogId: this.$route.params.articleId,
        userId: this.$store.state.userInfo.userId,
        parentId: -1,
      });
      if (res.status === 200) {
        this.$emit("reloadComment");
        this.$message({ message: res.message, type: "success", offset: 80 });
      } else {
        this.$message({ message: "评论发表失败！", type: "error", offset: 80 });
      }
    },
    // reloadReply(index) {
    //   repliesByComId({
    //     commentId: this.commentList[index].id,
    //     pageSize: 5,
    //     pageNo: this.$refs.page[index].current,
    //   }).then((res) => {
    //     this.commentList[index].replyCount++;
    //     //回复大于5条展示分页
    //     if (this.commentList[index].replyCount > 5) {
    //       this.$refs.paging[index].style.display = "flex";
    //     }
    //     this.$refs.check[index].style.display = "none";
    //     this.$refs.reply[index].$el.style.display = "none";
    //     this.commentList[index].replyDTOList = res.data;
    //   });
    // },
  },

  watch: {
    commentList() {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    },
  },
};
</script>

<style scoped>
p {
  margin-bottom: 1.25rem !important;
}
.blogger-tag {
  background: #ffa51e;
  font-size: 12px;
  display: inline-block;
  border-radius: 2px;
  color: #fff;
  padding: 0 5px;
  margin-left: 6px;
}
.comment-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 10px;
}
.comment-title i {
  font-size: 1.5rem;
  margin-right: 5px;
}
.comment-input-wrapper {
  border: 1px solid #90939950;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}
.comments-form-user-avatar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.ml-3 {
  padding: 0 16px;
}
.comment-textarea {
  font-size: 0.875rem;
  color: #555 !important;
  outline: none;
  padding: 10px 0;
  min-height: 94px;
  resize: none;
  border: none;
  width: 100%;
  border-radius: 4px;
}
.emoji-container {
  display: flex;
}
.comment-btn {
  border: 0;
  background: #12b7de;
  /* height: 100%;
  width: 100%; */
  outline: none;
  color: #fff;
  border-radius: 20px;
  font-weight: normal;
  cursor: pointer;
  text-align: center;
  padding: 6px 16px;
  font-size: 14px;
}
.count {
  padding: 5px;
  line-height: 1.75;

  font-weight: bold;
}
.pt-5 {
  border-top: 1px dashed #eaeaea;
  padding: 5px;
}
.reply-box {
  border-top: 1px dashed #eaeaea;
  padding: 5px;
}
.comment-meta {
  margin-left: 0.8rem;
  width: 100%;
  border-bottom: 1px dashed #f5f5f5;
}
.reply-meta {
  margin-left: 0.8rem;
  width: 100%;
}
.comment-user {
  font-size: 14px;
  line-height: 1.75;
  color: #444;

  font-weight: 700;
}
.comment-user a {
  color: #1abc9c !important;
  font-weight: 500;
  transition: 0.3s all;
}
.comment-nickname {
  text-decoration: none;
  color: #1abc9c !important;
  font-weight: 500;
}
.comment-info {
  line-height: 1.75;
  font-size: 0.75rem;
  color: #b3b3b3;
}
.reply-btn {
  cursor: pointer;
  float: right;
  color: #ef2f11;
}
.comment-content {
  padding-top: 0.625rem;
  line-height: 26px;
  font-size: 14px;
  word-wrap: break-word;
  color: #555;
}

.comment-avatar img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.like {
  cursor: pointer;
  font-size: 0.875rem;
}
.like:hover {
  color: #eb5055;
}
.like-active {
  cursor: pointer;
  font-size: 0.875rem;
  color: #eb5055;
}
.load-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load-wrapper button {
  background-color: #49b1f5;
  color: #fff;
}
</style>
